import { Metadata } from "next";
import Link from "next/link";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import {
  BarChart,
  Building,
  FileSpreadsheet,
  HeartPulse,
  LineChart,
  ChevronRight,
  PieChart,
  Factory,
  DollarSign,
  ArrowRight,
  CheckCircle,
  TrendingUp,
  Clock,
} from "lucide-react";

export const metadata: Metadata = {
  title: "客户案例 | bgactor AI Agents",
  description: "探索bgactor AI代理如何为不同行业的客户创造价值和推动业务增长",
};

// 模拟案例数据
const caseStudies = [
  {
    id: "global-financial",
    title: "全球金融服务企业提升数据分析效率",
    excerpt: "一家领先的金融服务公司使用bgactor的分析代理将报告生成时间从数天缩短到几分钟，同时发现了之前被忽略的成本节约机会。",
    industry: "金融服务",
    icon: DollarSign,
    iconColor: "text-green-400",
    results: [
      { label: "效率提升", value: "35%" },
      { label: "成本节约", value: "$1.2M/年" },
      { label: "分析周期", value: "从5天到2小时" }
    ],
    image: "/images/case-studies/finance.jpg",
    featured: true,
    client: "全球金融服务公司",
    solution: "AnalyticsAgent",
    year: "2023"
  },
  {
    id: "manufacturing-giant",
    title: "制造业巨头通过预测性维护减少停机时间",
    excerpt: "一家制造业领导者部署了bgactor的供应链代理，通过预测性维护警报显著减少了计划外停机时间。",
    industry: "制造业",
    icon: Factory,
    iconColor: "text-blue-400",
    results: [
      { label: "停机时间减少", value: "42%" },
      { label: "维护成本降低", value: "$3.5M/年" },
      { label: "设备寿命延长", value: "平均15%" }
    ],
    image: "/images/case-studies/manufacturing.jpg",
    featured: true,
    client: "全球制造业领导企业",
    solution: "SupplyChainAgent",
    year: "2023"
  },
  {
    id: "healthcare-provider",
    title: "医疗保健提供商优化患者护理",
    excerpt: "一家大型医疗保健网络利用AI代理优化患者护理流程，改善患者体验并减轻医护人员的行政负担。",
    industry: "医疗保健",
    icon: HeartPulse,
    iconColor: "text-red-400",
    results: [
      { label: "护士行政工作减少", value: "27%" },
      { label: "患者满意度提高", value: "18%" },
      { label: "平均住院时间缩短", value: "1.2天" }
    ],
    image: "/images/case-studies/healthcare.jpg",
    featured: false,
    client: "区域医疗保健网络",
    solution: "PatientCareAgent",
    year: "2023"
  },
  {
    id: "ecommerce-platform",
    title: "电子商务平台提升客户服务质量",
    excerpt: "一家在线零售商通过实施bgactor的CustomerServiceAgent，显著提高了客户满意度和解决效率。",
    industry: "电子商务",
    icon: Building,
    iconColor: "text-purple-400",
    results: [
      { label: "客户满意度提升", value: "28%" },
      { label: "平均响应时间缩短", value: "62%" },
      { label: "一次解决率提高", value: "41%" }
    ],
    image: "/images/case-studies/ecommerce.jpg",
    featured: true,
    client: "领先电子商务平台",
    solution: "CustomerServiceAgent",
    year: "2023"
  },
  {
    id: "insurance-innovator",
    title: "保险公司通过AI代理加速理赔处理",
    excerpt: "一家创新型保险公司使用bgactor的ClaimsAgent自动化理赔流程，实现更快的处理时间和更高的客户满意度。",
    industry: "保险",
    icon: FileSpreadsheet,
    iconColor: "text-amber-400",
    results: [
      { label: "理赔处理时间缩短", value: "56%" },
      { label: "人工处理需求减少", value: "73%" },
      { label: "准确度提高", value: "14%" }
    ],
    image: "/images/case-studies/insurance.jpg",
    featured: false,
    client: "领先保险提供商",
    solution: "ClaimsAgent",
    year: "2023"
  },
  {
    id: "energy-efficiency",
    title: "能源公司优化电网管理",
    excerpt: "一家公用事业公司部署了bgactor的智能能源代理，优化电网管理，提高能源效率，降低运营成本。",
    industry: "能源",
    icon: LineChart,
    iconColor: "text-yellow-400",
    results: [
      { label: "电网效率提高", value: "18%" },
      { label: "预测准确度", value: "94%" },
      { label: "运营成本降低", value: "$4.3M/年" }
    ],
    image: "/images/case-studies/energy.jpg",
    featured: false,
    client: "区域能源提供商",
    solution: "EnergyOptimizationAgent",
    year: "2023"
  }
];

// 按行业分组
const industries = Array.from(new Set(caseStudies.map(study => study.industry)));
const featuredCases = caseStudies.filter(study => study.featured);

export default function CaseStudiesPage() {
  return (
    <div className="flex flex-col min-h-screen bg-slate-950">
      {/* Hero Section */}
      <section className="w-full py-12 md:py-24 bg-gradient-to-r from-slate-900 to-indigo-950">
        <div className="container px-4 md:px-6">
          <div className="flex flex-col items-center space-y-4 text-center">
            <div className="space-y-2">
              <h1 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl lg:text-6xl/none text-white">
                AI代理助力 <span className="text-[#50E3C2]">业务转型</span>
              </h1>
              <p className="mx-auto max-w-[700px] text-zinc-200 md:text-xl">
                探索bgactor如何帮助各行各业的企业采用AI代理技术，优化流程，提高效率，创造真实的业务价值。
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Featured Case Studies */}
      <section className="w-full py-12 md:py-24 bg-slate-950">
        <div className="container px-4 md:px-6">
          <div className="flex flex-col items-center space-y-4 text-center mb-10">
            <div className="space-y-2">
              <h2 className="text-3xl font-bold text-white">特色案例</h2>
              <p className="mx-auto max-w-[700px] text-zinc-400 md:text-lg">
                了解领先企业如何使用bgactor的AI代理转变其业务运营并取得显著成果。
              </p>
            </div>
          </div>

          <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
            {featuredCases.map((study, index) => (
              <Card 
                key={study.id} 
                className={`bg-slate-900/50 border-slate-800 overflow-hidden hover:border-[#50E3C2]/50 transition-colors ${
                  index === 0 ? "lg:col-span-2 lg:row-span-2" : ""
                }`}
              >
                <div className="aspect-video relative bg-slate-800/50">
                  <div className="flex items-center justify-center h-full bg-gradient-to-br from-indigo-900/30 to-indigo-800/10">
                    <study.icon className={`h-16 w-16 ${study.iconColor} opacity-30`} />
                  </div>
                </div>
                <CardHeader>
                  <div className="flex justify-between items-center mb-2">
                    <Badge className="bg-indigo-900 hover:bg-indigo-800">
                      {study.industry}
                    </Badge>
                    <div className="flex items-center text-zinc-400 text-sm">
                      <Clock className="h-4 w-4 mr-1" />
                      <span>{study.year}</span>
                    </div>
                  </div>
                  <CardTitle className="text-white text-xl md:text-2xl">{study.title}</CardTitle>
                  <CardDescription className="text-zinc-400">
                    {study.excerpt}
                  </CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="grid grid-cols-2 md:grid-cols-3 gap-4 mb-4">
                    {study.results.map((result, idx) => (
                      <div key={idx} className="bg-slate-800/50 p-3 rounded-lg">
                        <p className="text-[#50E3C2] text-xl md:text-2xl font-bold">{result.value}</p>
                        <p className="text-zinc-400 text-sm">{result.label}</p>
                      </div>
                    ))}
                  </div>
                  <div className="flex items-center text-zinc-300 text-sm space-x-6">
                    <div className="flex items-center">
                      <Building className="h-4 w-4 mr-1 text-zinc-400" />
                      <span>{study.client}</span>
                    </div>
                    <div className="flex items-center">
                      <Bot className="h-4 w-4 mr-1 text-zinc-400" />
                      <span>{study.solution}</span>
                    </div>
                  </div>
                </CardContent>
                <CardFooter className="border-t border-slate-800 pt-4">
                  <Link 
                    href={`/case-studies/${study.id}`}
                    className="text-[#50E3C2] hover:text-[#3AC4A5] flex items-center text-sm"
                  >
                    查看完整案例研究
                    <ChevronRight className="ml-1 h-4 w-4" />
                  </Link>
                </CardFooter>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* Industry Specific Case Studies */}
      <section className="w-full py-12 md:py-24 bg-gradient-to-b from-slate-950 to-slate-900">
        <div className="container px-4 md:px-6">
          <div className="flex flex-col items-center space-y-4 text-center mb-10">
            <div className="space-y-2">
              <h2 className="text-3xl font-bold text-white">按行业浏览案例</h2>
              <p className="mx-auto max-w-[700px] text-zinc-400 md:text-lg">
                每个行业都有其独特的挑战和机遇。探索bgactor如何提供针对特定行业的AI代理解决方案。
              </p>
            </div>
          </div>

          <Tabs defaultValue={industries[0]} className="w-full">
            <TabsList className="w-full mb-8 flex justify-center overflow-x-auto bg-transparent h-auto p-0">
              {industries.map((industry) => (
                <TabsTrigger
                  key={industry}
                  value={industry}
                  className="px-4 py-2 rounded-lg data-[state=active]:bg-slate-800 data-[state=active]:text-white data-[state=active]:shadow data-[state=inactive]:bg-slate-900/50 data-[state=inactive]:text-zinc-400"
                >
                  {industry}
                </TabsTrigger>
              ))}
            </TabsList>

            {industries.map((industry) => (
              <TabsContent key={industry} value={industry} className="mt-0">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                  {caseStudies
                    .filter(study => study.industry === industry)
                    .map((study) => (
                      <Card key={study.id} className="bg-slate-900/50 border-slate-800 hover:border-[#50E3C2]/30 transition-colors">
                        <div className="flex flex-col md:flex-row">
                          <div className="md:w-1/3 aspect-square md:aspect-auto relative bg-slate-800/50">
                            <div className="flex items-center justify-center h-full bg-gradient-to-br from-indigo-900/30 to-indigo-800/10">
                              <study.icon className={`h-12 w-12 ${study.iconColor} opacity-30`} />
                            </div>
                          </div>
                          <div className="md:w-2/3">
                            <CardHeader className="pb-2">
                              <CardTitle className="text-white text-lg">{study.title}</CardTitle>
                            </CardHeader>
                            <CardContent className="pb-2">
                              <p className="text-zinc-400 text-sm mb-4">{study.excerpt}</p>
                              <div className="flex flex-wrap gap-2 mb-3">
                                {study.results.map((result, idx) => (
                                  <Badge key={idx} variant="outline" className="flex items-center gap-1 border-[#50E3C2]/30">
                                    <CheckCircle className="h-3 w-3 text-[#50E3C2]" />
                                    <span className="text-zinc-300">{result.label}: </span>
                                    <span className="text-[#50E3C2]">{result.value}</span>
                                  </Badge>
                                ))}
                              </div>
                            </CardContent>
                            <CardFooter className="pt-0">
                              <Link 
                                href={`/case-studies/${study.id}`}
                                className="text-[#50E3C2] hover:text-[#3AC4A5] flex items-center text-sm"
                              >
                                了解更多
                                <ArrowRight className="ml-1 h-4 w-4" />
                              </Link>
                            </CardFooter>
                          </div>
                        </div>
                      </Card>
                    ))}
                </div>
              </TabsContent>
            ))}
          </Tabs>
        </div>
      </section>

      {/* Results Overview Section */}
      <section className="w-full py-12 md:py-24 bg-slate-900">
        <div className="container px-4 md:px-6">
          <div className="flex flex-col items-center space-y-4 text-center mb-10">
            <div className="space-y-2">
              <h2 className="text-3xl font-bold text-white">我们的客户成果</h2>
              <p className="mx-auto max-w-[700px] text-zinc-400 md:text-lg">
                bgactor的AI代理解决方案在所有行业和应用中始终如一地提供显著成果。
              </p>
            </div>
          </div>

          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
            <Card className="bg-slate-900/50 border-slate-800">
              <CardHeader>
                <div className="w-12 h-12 rounded-lg bg-indigo-900/50 flex items-center justify-center mb-2">
                  <TrendingUp className="h-6 w-6 text-[#50E3C2]" />
                </div>
                <CardTitle className="text-white text-4xl">35%</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-zinc-400">平均效率提升</p>
              </CardContent>
            </Card>

            <Card className="bg-slate-900/50 border-slate-800">
              <CardHeader>
                <div className="w-12 h-12 rounded-lg bg-indigo-900/50 flex items-center justify-center mb-2">
                  <DollarSign className="h-6 w-6 text-[#50E3C2]" />
                </div>
                <CardTitle className="text-white text-4xl">28%</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-zinc-400">平均成本节约</p>
              </CardContent>
            </Card>

            <Card className="bg-slate-900/50 border-slate-800">
              <CardHeader>
                <div className="w-12 h-12 rounded-lg bg-indigo-900/50 flex items-center justify-center mb-2">
                  <PieChart className="h-6 w-6 text-[#50E3C2]" />
                </div>
                <CardTitle className="text-white text-4xl">3.5X</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-zinc-400">投资回报率</p>
              </CardContent>
            </Card>

            <Card className="bg-slate-900/50 border-slate-800">
              <CardHeader>
                <div className="w-12 h-12 rounded-lg bg-indigo-900/50 flex items-center justify-center mb-2">
                  <BarChart className="h-6 w-6 text-[#50E3C2]" />
                </div>
                <CardTitle className="text-white text-4xl">94%</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-zinc-400">客户满意度</p>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="w-full py-12 md:py-24 bg-gradient-to-r from-indigo-900 to-indigo-950">
        <div className="container px-4 md:px-6">
          <div className="flex flex-col items-center space-y-4 text-center">
            <div className="space-y-2">
              <h2 className="text-3xl font-bold text-white">准备好开始您的AI代理之旅了吗？</h2>
              <p className="mx-auto max-w-[700px] text-zinc-200 md:text-xl">
                联系我们的专家团队，了解bgactor的AI代理解决方案如何为您的企业创造价值。
              </p>
            </div>
            <div className="flex flex-col sm:flex-row gap-4 mt-6">
              <Button asChild size="lg" className="bg-[#50E3C2] text-slate-900 hover:bg-[#3AC4A5]">
                <Link href="/demo">
                  请求演示
                </Link>
              </Button>
              <Button asChild variant="outline" size="lg" className="border-white text-white hover:bg-white/10">
                <Link href="/contact">
                  联系销售团队
                </Link>
              </Button>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

// 添加缺失的组件定义
function Bot(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg
      {...props}
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <path d="M12 8V4H8" />
      <rect width="16" height="12" x="4" y="8" rx="2" />
      <path d="M2 14h2" />
      <path d="M20 14h2" />
      <path d="M15 13v2" />
      <path d="M9 13v2" />
    </svg>
  );
} 